<template>
	<div class="page-wrapper">
		<div class="mb10">
			<el-button type="success" @click="saveConfig">{{ $t('cm.h1') }}</el-button>
		</div>
		<el-scrollbar height="100%">
			<el-tabs v-model="activeTabName">
				<el-tab-pane :label="$t('cm.h2')" name="tab0">
					<div class="mb15">
						<el-button type="primary" @click="addSwiper">{{ $t('cm.h1') }}</el-button>
                        <div class="mt10">{{ $t('cm.h9') }}：1280*320</div>
					</div>
					<!-- <el-scrollbar max-height="1000px"> -->
						<div class="pb30">
							<div v-for="(item, i) in swiperList" :key="i" style="width: 400px; height: 102px" class="mb10 flex flexL">
								<div>
									<AUploadSingle v-model="item.imgurl" upWidth="400px" upHeight="100px" />
								</div>
								<el-button type="danger" @click="delSwiper(i)" class="ml10">{{ $t('cm.h10') }}</el-button>
							</div>
						</div>
					<!-- </el-scrollbar> -->
				</el-tab-pane>
				<el-tab-pane :label="$t('cm.h3')" name="tab1">
					<div class="mb15">
						<el-button type="primary" @click="addAbout">{{ $t('cm.h8') }}</el-button>
					</div>
					<!-- <el-scrollbar max-height="1000px"> -->
						<div class="pb30">
							<div v-for="(item, i) in aboutList" :key="i" style="width: 550px; height: 302px; border-bottom: 1px solid #ddd" class="mb10 flex flexL">
								<div>
									<div class="flex">
										<div style="width: 80px">{{ $t('cm.h12') }}</div>
										<el-input v-model="item.title" :placeholder="$t('cm.h12')" style="width: 400px"></el-input>
									</div>
									<div class="mt10 mb10 flex">
										<div style="width: 80px">{{ $t('cm.h13') }}</div>
										<el-input v-model="item.content" type="textarea" rows="5" :placeholder="$t('cm.h13')" style="width: 400px"></el-input>
									</div>
									<div class="flex">
										<div style="width: 80px">{{ $t('cm.h14') }} (640*320)</div>
										<AUploadSingle v-model="item.imgurl" upWidth="200px" upHeight="100px" />
									</div>
								</div>
								<el-button type="danger" @click="delAbout(i)" class="ml10">{{ $t('cm.h10') }}</el-button>
							</div>
						</div>
					<!-- </el-scrollbar> -->
				</el-tab-pane>
				<el-tab-pane :label="$t('cm.h4')" name="tab2">
					<div class="mb15">
						<el-button type="primary" @click="addWhyus">{{ $t('cm.h8') }}</el-button>
					</div>
					<!-- <el-scrollbar max-height="1000px"> -->
						<div class="pb30">
							<div v-for="(item, i) in whyusList" :key="i" style="width: 550px; height: 302px; border-bottom: 1px solid #ddd" class="mb10 flex flexL">
								<div>
									<div class="flex">
										<div style="width: 80px">{{ $t('cm.h12') }}</div>
										<el-input v-model="item.title" :placeholder="$t('cm.h12')" style="width: 400px"></el-input>
									</div>
									<div class="mt10 mb10 flex">
										<div style="width: 80px">{{ $t('cm.h13') }}</div>
										<el-input v-model="item.content" type="textarea" rows="5" :placeholder="$t('cm.h13')" style="width: 400px"></el-input>
									</div>
									<div class="flex">
										<div style="width: 80px">{{ $t('cm.h14') }} (640*320)</div>
										<AUploadSingle v-model="item.imgurl" upWidth="200px" upHeight="100px" />
									</div>
								</div>
								<el-button type="danger" @click="delWhyus(i)" class="ml10">{{ $t('cm.h10') }}</el-button>
							</div>
						</div>
					<!-- </el-scrollbar> -->
				</el-tab-pane>
				<el-tab-pane :label="$t('cm.h5')" name="tab3">
					<div class="mb15">
						<el-button type="primary" @click="addPro">{{ $t('cm.h8') }}</el-button>
					</div>
					<!-- <el-scrollbar max-height="1000px"> -->
						<div class="pb30">
							<div v-for="(item, i) in proList" :key="i" style="width: 550px; height: 152px; border-bottom: 1px solid #ddd" class="mb10 flex flexL">
								<div>
									<div class="flex">
										<div style="width: 80px">{{ $t('cm.h15') }}</div>
										<el-input v-model="item.title" :placeholder="$t('cm.h12')" style="width: 400px"></el-input>
									</div>
									<div class="flex mt10">
										<div style="width: 80px">{{ $t('cm.h16') }}</div>
										<el-select v-model="item.proid" style="width: 400px" @change="handleChange($event, i)">
											<el-option v-for="option in allproList" :key="option.id" :label="option.name" :value="option.id"></el-option>
										</el-select>
									</div>
								</div>
								<el-button type="danger" @click="delPro(i)" class="ml10">{{ $t('cm.h10') }}</el-button>
							</div>
						</div>
					<!-- </el-scrollbar> -->
				</el-tab-pane>
				<el-tab-pane :label="$t('cm.h6')" name="tab4">
					<div class="mb15">
						<el-button type="primary" @click="addTeam">{{ $t('cm.h8') }}</el-button>
					</div>
					<!-- <el-scrollbar max-height="1000px"> -->
						<div class="pb30">
							<div v-for="(item, i) in teamList" :key="i" style="width: 550px; height: 302px; border-bottom: 1px solid #ddd" class="mb10 flex flexL">
								<div>
									<div class="flex">
										<div style="width: 80px">{{ $t('cm.h12') }}</div>
										<el-input v-model="item.title" :placeholder="$t('cm.h12')" style="width: 400px"></el-input>
									</div>
									<div class="mt10 mb10 flex">
										<div style="width: 80px">{{ $t('cm.h13') }}</div>
										<el-input v-model="item.content" type="textarea" rows="5" :placeholder="$t('cm.h13')" style="width: 400px"></el-input>
									</div>
									<div class="flex">
										<div style="width: 80px">{{ $t('cm.h14') }} (640*320)</div>
										<AUploadSingle v-model="item.imgurl" upWidth="200px" upHeight="100px" />
									</div>
								</div>
								<el-button type="danger" @click="delTeam(i)" class="ml10">{{ $t('cm.h10') }}</el-button>
							</div>
						</div>
					<!-- </el-scrollbar> -->
				</el-tab-pane>
				<el-tab-pane :label="$t('cm.h7')" name="tab5">
					<div class="flex">
						<div style="width: 400px">
							<div class="flex mb10 flexL">
								<div style="width: 100px">{{ $t('cm.h17') }}：</div>
								<el-input v-model="website.tel" :placeholder="$t('cm.h17')" style="width: 300px"></el-input>
							</div>
							<div class="flex mb10 flexL">
								<div style="width: 100px">{{ $t('cm.h18') }}：</div>
								<el-input v-model="website.fax" :placeholder="$t('cm.h18')" style="width: 300px"></el-input>
							</div>
							<div class="flex mb10 flexL">
								<div style="width: 100px">{{ $t('cm.h19') }}：</div>
								<el-input v-model="website.email" :placeholder="$t('cm.h19')" style="width: 300px"></el-input>
							</div>
							<div class="flex mb10">
								<div style="width: 100px">{{ $t('cm.h20') }}：</div>
								<el-input v-model="website.address" :placeholder="$t('cm.h20')" style="width: 300px" type="textarea" rows="3"></el-input>
							</div>
						</div>
						<div class="flex1"></div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-scrollbar>
	</div>
</template>

<script setup lang="ts">
import { getConfigTable, addConfigTable, getProductListAll } from '@/api/api'
import AUploadSingle from '@/components/AUploadSingle.vue'
import { elMsg } from '@/utils/message'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const activeTabName = ref('tab0')
const swiperList = ref([])
const addSwiper = () => {
	swiperList.value.push({
		imgurl: ''
	})
}
const delSwiper = i => {
	swiperList.value.splice(i, 1)
}
const aboutList = ref([])
const addAbout = () => {
	aboutList.value.push({
		title: '',
		content: '',
		imgurl: ''
	})
}
const delAbout = i => {
	aboutList.value.splice(i, 1)
}
const whyusList = ref([])
const addWhyus = () => {
	whyusList.value.push({
		title: '',
		content: '',
		imgurl: ''
	})
}
const delWhyus = i => {
	whyusList.value.splice(i, 1)
}
const teamList = ref([])
const addTeam = () => {
	teamList.value.push({
		title: '',
		content: '',
		imgurl: ''
	})
}
const delTeam = i => {
	teamList.value.splice(i, 1)
}
const allproList = ref([])
const proList = ref([])
const addPro = () => {
	proList.value.push({
		title: '',
		proid: '',
		proinfo: ''
	})
}
const delPro = i => {
	proList.value.splice(i, 1)
}
const handleChange = (e: any, i: any) => {
	console.log(e, i)
	proList.value[i].proinfo = allproList.value.find(item => item.id == e)
}
const website = ref({
	tel: '',
	fax: '',
	email: '',
	address: ''
})
const saveConfig = () => {
	const homeConfig = {
		swiperList: swiperList.value,
		aboutList: aboutList.value,
		whyusList: whyusList.value,
		proList: proList.value,
		teamList: teamList.value,
		website: website.value
	}
	console.log(homeConfig)
	// return;
	addConfigTable({
		id: 22,
		value: JSON.stringify(homeConfig)
	})
		.then(result => {
			elMsg('保存成功', 'success')
		})
		.catch(err => {})
}
onMounted(() => {
	getProductListAll({})
		.then(result => {
			allproList.value = result.data
		})
		.catch(err => {})
	getConfigTable({ id: 22 })
		.then(result => {
			console.log()
			const list = result.data[0].value ? JSON.parse(result.data[0].value) : {}
			if (list.swiperList) {
				swiperList.value = list.swiperList
			}
			if (list.aboutList) {
				aboutList.value = list.aboutList
			}
			if (list.whyusList) {
				whyusList.value = list.whyusList
			}
			if (list.proList) {
				proList.value = list.proList
			}
			if (list.teamList) {
				teamList.value = list.teamList
			}
			if (list.website) {
				website.value = list.website
			}
		})
		.catch(err => {})
})
</script>

<style lang="scss" scoped>
.item {
	display: flex;
	.title {
		width: 200px;
	}
	.content {
		flex: 1;
		height: auto;
	}
}
</style>
